<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerWeekStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="充值方式筛选" prop="payType">
        <el-select v-model="form.payType" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option
            v-if="item.value!=-1"
            v-for="item in consts.RECHARGE_TYPE_NAMES"
            :label="item.title"
            :key="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作端" prop="clientType">
        <el-select v-model="form.clientType" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option
            v-if="item.value!=-1"
            v-for="item in consts.DEVICE_TYPE"
            :label="item.title"
            :key="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button v-if="roleCheck('export')" class="filter-item" type="primary" icon="el-icon-download"
                 @click="exportExcel">导出
      </el-button>
    </el-form>

    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center" :default-sort="{prop: 'time', order: 'descending'}">
      <el-table-column label="时间" prop="time" sortable width="120" fixed="left" align="center">
      </el-table-column>
      <el-table-column width="120" :label="item" align="center" v-for="(item,index) in timeList" :key="index">
        <template slot-scope="{row}">
          {{row.dataList[index].value | currency}}
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>


<script>
  import {getStatisticalHoursRecharge} from "@/services/api/statistical";
  import {form, pickerOption, grid} from '@/build'

  export default {
    name: "statistics-hours-recharge",
    mixins: [form, pickerOption, grid],
    data() {
      // let times = _.toPeriod({
      //   start: [-1, 'days'],
      //   end: [0, 'days'],
      //   format: 'YYYY-MM-DD'
      // });
      // 本月时间本月1号至当前时间
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      return {
        tableData: [],
        timeList: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
        form: {
          time: monthTime,
          payType: undefined,
          clientType: undefined,
        },
        filters: {
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() + 86399999,
          dataType: 1,
          export: undefined,
        },
      }
    },
    methods: {
      submitFilterForm() {
        const {time, payType, clientType} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() + 86399999;
        }

        this.filters = {...this.filters, payType, clientType, stime, etime, project: consts.PLATFROM_PREFIX}
        this.getAll()
      },
    },
    mounted() {
      this.bindGet(getStatisticalHoursRecharge, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          let newArray = []
          let dataList = []
          _.forIn(data, (val, key) => {
            newArray.push({time: key, dataList: val})
          })
          newArray = _.sortBy(newArray, (item) => {
            return -item.time;
          })

          newArray.map((item, index) => {
            _.forIn(item.dataList, (val, key) => {
              dataList.push({hour: key, value: val})
            })
            dataList = _.sortBy(dataList, (item) => {
              return item.hour;
            })
            item.dataList = dataList
            dataList = []
          })
          return newArray
        }
      });
      this.submitFilterForm()
    }

  }
</script>

<style scoped>

</style>
